<template>
  <div class="my-order">
    <div class="title">我的服务</div>
    <div class="list">
      <div class="item active" @click="itemClick('/pages-sub/hotel/occupant/list')">
        <image class="icon" src="@/static/images/my/rzrxx.png" />
        <div class="text">入住人信息</div>
      </div>
      <div
        class="item active"
        @click="itemClick(`/pages-sub/artist/index?id=${userStore.userInfo.userId}`)"
        v-if="userStore.userInfo.userType === 1"
      >
        <image class="icon" src="@/static/images/my/me.png" />
        <div class="text">个人主页</div>
      </div>
      <div class="item active" @click="switchTab('/pages/collect/index')">
        <image class="icon" src="@/static/images/my/wdsc.png" />
        <div class="text">我的收藏</div>
      </div>
      <div class="item active" @click="to('/pages-sub/system/fans')">
        <image class="icon" src="@/static/images/my/wdgz.png" />
        <div class="text">我的关注</div>
      </div>
      <div class="item active" @click="to('/pages-sub/activity/list', { myjoin: 1 })">
        <image class="icon" src="@/static/images/my/activity.png" />
        <div class="text">我的活动</div>
      </div>
      <div class="item active" @click="to('/pages-sub/system/bank/list')">
        <image class="icon" src="@/static/images/my/bank.png" />
        <div class="text">银行卡</div>
      </div>
      <div class="item active" @click="itemClick('/pages-sub/join-in/index')">
        <image class="icon" src="@/static/images/my/rzsq.png" />
        <div class="text">入驻申请</div>
      </div>
      <div class="item active" @click="to('/pages-sub/system/join-team')">
        <image class="icon" src="@/static/images/my/team.png" />
        <div class="text">加入社群</div>
      </div>
      <div class="item active" @click="itemClick('/')">
        <image class="icon" src="@/static/images/my/yqhy.png" />
        <div class="text">邀请好友</div>
      </div>
      <div class="item active" @click="itemClick('/pages-sub/system/about')">
        <image class="icon" src="@/static/images/my/gywm.png" />
        <div class="text">关于我们</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { to, switchTab } from '@/utils/page'
import { useUserStore } from '@/store/index'

defineOptions({ name: 'Sverice' })

const userStore = useUserStore()

function itemClick(path) {
  if (userStore.isLogged) {
    to(path)
  } else {
    userStore.setShowModal(true)
  }
}
</script>
<style lang="scss" scoped>
.my-order {
  padding: 24rpx 0rpx 38rpx;
  margin: 40rpx 30rpx 0;
  background: #ffffff;
  border-radius: 30rpx;
  box-shadow: 0px 11rpx 19rpx 0 rgba(#000000, 0.05);

  .title {
    padding: 0 30rpx;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 36rpx;
    color: var(--color1);
  }
  .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: space-between;
    .item {
      margin-top: 40rpx;
      text-align: center;
      .icon {
        width: 57rpx;
        height: 57rpx;
      }
      .text {
        margin-top: 10rpx;
        font-size: 23rpx;
        color: var(--color2);
      }
    }
  }
}
</style>
